import React, { ReactElement } from 'react';
import {
  View,
  requireNativeComponent,
  ViewStyle,
  PixelRatio
} from 'react-native';
import { isIOS } from '../../constant';

const RCTShadowView = requireNativeComponent('RCTShadowView');

type Children = ReactElement | null | string | number;

export interface ShadowOptions {
  cornerRadius?: number;
  shadowRadius?: number;
  alpha?: number;
  shadowDx?: number;
  shadowDy?: number;
  shadowColor?: string;
}

interface BoxShadowProps {
  style?: ViewStyle | ViewStyle[];
  children?: Children[] | Children;
  options: ShadowOptions;
}

const BoxShadow = ({
  style,
  children,
  options
}: BoxShadowProps): ReactElement => {
  const {
    cornerRadius = 0,
    shadowRadius = 0,
    alpha = 1,
    shadowDx = 0,
    shadowDy = 0,
    shadowColor = '#ffffff'
  } = options || {};
  const pixelRatio = PixelRatio.get();
  if (isIOS) {
    return <View style={style}>{children}</View>;
  }
  return (
    <RCTShadowView
      style={[{}, style]}
      options={{
        cornerRadius: cornerRadius * pixelRatio,
        shadowRadius: shadowRadius * pixelRatio,
        alpha: Math.floor(alpha * 255),
        shadowDx: shadowDx * pixelRatio,
        shadowDy: shadowDy * pixelRatio,
        shadowColor
      }}
    >
      {children}
    </RCTShadowView>
  );
};

export default BoxShadow;
